<template>
  <div id="app">
    <div id="_j_mfw_focus" class="mfw-focus">
      <!-- 轮播图 -->
      <div class="show-slider" style="height: 450px;">
        <!-- 轮播图大图 -->
        <ul class="show-image">
          <li data-id="0" class="show_image first" style="display:block">
            <a href="./traveldetail.html?id=5e3bf6a93f050000ff0035ec" class="show-pic">
              <img :src="this.swiperBigImg.coverUrl" />
            </a>
            <a href="javascript:void(0);" class="show-title dark">
              <div class="date">
                <span class="day">15</span>/Oct.2020
              </div>
              <h3>{{this.swiperBigImg.title}}</h3>
            </a>
          </li>
        </ul>
        <!-- 轮播图小图 -->
        <ul class="show-nav">
          <li
            :class="swiperBigImg.coverUrl===item.coverUrl?'show_nav active':'show_nav'"
            v-for="item in BannerList"
            :key="item.id"
          >
            <a href="javascript:">
              <img :src="item.coverUrl" height="62" width="110" @click="BannerClick(item)" />
              <span></span>
            </a>
          </li>
        </ul>
        <a target="_blank" href="javascript:void(0);" class="show-more">历历在目</a>
      </div>
      <div id="_j_index_search" class="search-container">
        <div class="search-group">
          <div id="_j_index_search_tab" class="searchtab">
            <ul class="clearfix">
              <li data-index="-1" class="tab-selected">
                <i></i>全部
              </li>
              <li data-index="0">
                <i></i>目的地
              </li>
              <li data-index="1">
                <i></i>攻略
              </li>
              <li data-index="2">
                <i></i>游记
              </li>
              <li data-index="3">
                <i></i>找人
              </li>
            </ul>
          </div>
          <div id="_j_index_search_bar_all" class="searchbar">
            <div class="search-wrapper">
              <div class="search-input">
                <input
                  name="keyword"
                  id="keyword"
                  type="text"
                  placeholder="搜目的地/攻略/游记/用户"
                  autocomplete="off"
                />
              </div>
            </div>
            <div id="_j_index_search_btn_all" class="search-button">
              <a role="button" href="javascript:">
                <i class="icon-search"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mfw-container clearfix">
      <div class="sales-entrys-container clearfix">
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-sales">
          <div class="sales-entrys-title">自由行</div>
          <div class="sales-entrys-subtitle">旅行就要freestyle</div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-group">
          <div class="sales-entrys-title">跟团游</div>
          <div class="sales-entrys-subtitle">省心省力 行程透明</div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-localdeals">
          <div class="sales-entrys-title">当地游</div>
          <div class="sales-entrys-subtitle">最地道的玩法体验</div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-flight">
          <div class="sales-entrys-title">机票</div>
          <div class="sales-entrys-subtitle">特惠一折起</div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-visa">
          <div class="sales-entrys-title">签证</div>
          <div class="sales-entrys-subtitle">服务优质 出签率高</div>
        </a>
        <a href="javascript:void(0);" class="sales-entrys-item entrys-bg-ship">
          <div class="sales-entrys-title">邮轮</div>
          <div class="sales-entrys-subtitle">移动的海上城堡</div>
        </a>
      </div>
      <div class="mfw-wrapper">
        <div class="mfw-travelnotes">
          <div class="navbar clearfix">
            <ul id="_j_tn_nav" class="tn-nav">
              <li class="_j_gs_tab tn-nav-hot active">
                <a href="javascript:void(0);">热门游记</a>
              </li>
              <li class="_j_gs_tab tn-nav-new">
                <a href="javascript:void(0);">最新发表</a>
              </li>
            </ul>
            <div class="tn-write">
              <a href="javascript:void(0);" class="btn-add">
                <i></i>写游记
              </a>
            </div>
          </div>
          <div class="pagelet-block">
            <form method="post" id="searchForm">
              <input type="hidden" name="orderType" value="1" id="orderType" />
              <div id="_j_tn_content">
                <div class="tn-list">
                  <div class="tn-item clearfix" v-for="item in travelList" :key="item.id">
                    <div class="tn-image">
                      <a href="javascript:void(0);" target="_blank">
                        <img :src="item.coverUrl" style="display: inline;" />
                      </a>
                    </div>
                    <div class="tn-wrapper">
                      <dl>
                        <dt>
                          <a
                            href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                            target="_blank"
                          >{{item.title}}</a>
                        </dt>
                        <dd class="overflow">
                          <a
                            href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                            target="_blank"
                          >{{item.summary}}</a>
                        </dd>
                      </dl>
                      <div class="tn-extra">
                        <span class="tn-ding">
                          <a
                            href="javascript:void(0);"
                            data-japp="articleding"
                            data-iid="12451790"
                            data-vote="2157"
                            rel="nofollow"
                            class="btn-ding"
                          ></a>
                          <em id="topvote12451790">{{item.viewnum}}</em>
                        </span>
                        <span class="tn-place">
                          <i></i>
                          <a
                            href="javascript:void(0);"
                            rel="nofollow"
                            class="_j_gs_item"
                          >{{item.destName}}</a>，by
                        </span>
                        <span class="tn-user">
                          <a href="javascript:void(0);" target="_blank" rel="nofollow">
                            <img :src="item.headImgUrl" />
                            {{item.author.nickname}}
                          </a>
                        </span>
                        <span class="tn-nums">
                          <i></i>
                          {{item.replynum}}/{{item.sharenum}}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <br />
                <br />
                <div style="float: right;">
                  <div style="float: left;">
                    <span style="line-height: 30px;">
                      共2页 /
                      16条&nbsp;&nbsp;&nbsp;
                    </span>
                  </div>
                  <div id="pagination" class="jq-pagination" style="display: inline;">
                    <a
                      class="prev disabled"
                      href="javascript:void(0);"
                      jp-role="prev"
                      jp-data="0"
                    >上一页</a>
                    <a href="javascript:void(0);" jp-role="page" jp-data="1" class="active">1</a>
                    <a href="javascript:void(0);" jp-role="page" jp-data="2">2</a>
                    <a class="next" href="javascript:void(0);" jp-role="next" jp-data="2">下一页</a>
                    <a class="last" href="javascript:void(0);" jp-role="last" jp-data="2">尾页</a>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="mfw-aside">
        <div class="asidebox safety-prevention">
          <a href="javascript:void(0);" style="display: block; margin-top: 5px;">
            <img src="../assets/images/index-link.png" width="218" height="31" />
          </a>
        </div>
        <div class="asidebox box-gonglve">
          <div class="asidebox-hd">
            <h2 class="hd-title">旅游攻略推荐</h2>
            <a href="./strategy_index.html" class="hd-right">更多</a>
          </div>
          <div class="asidebox-bd">
            <div class="gonglve-item">
              <div class="img">
                <a href="javascript:void(0);">
                  <img width="200px" src="../assets/images/wKgE2l0chlCATLEFAA8R6jYHC0U155.jpg" />
                  <span class="mark">自由行攻略</span>
                </a>
              </div>
              <h3>
                <a href="javascript:void(0);">广州长隆野生动物园</a>
              </h3>
            </div>
          </div>
        </div>
        <div class="m-hotsale">
          <h3 class="hd">本周热卖</h3>
          <ul>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <span class="image">
                  <img
                    src="../assets/images/wKgIC1xOo6iAS0mlABAmBVFn6AA539.gif"
                    height="70"
                    width="100"
                  />
                </span>
                <div
                  title="最高立减800·上海飞马尔代夫鲁滨逊努努岛7天蜜月自由行（一价全包+私人泳池+儿童吃住优惠+婚纱摄影+可预订奥静/努努岛/中央格兰宁/康迪玛）"
                  class="title"
                >最高立减800·上海飞马尔代夫鲁滨逊努努...</div>
                <span class="price">¥11880起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <span class="image">
                  <img
                    src="../assets/images/wKgED1vzqwOAAsFFAAL1lFyHgLg47.jpeg"
                    height="70"
                    width="100"
                  />
                </span>
                <div
                  title="【五月美食节】上海出发塞班岛6天5晚自由行(早鸟优惠最高减500元+金卡会员立减500元+赠环岛游+军舰岛+接送机+可升级丛林探险+双重套餐不同选择+含税费1550元+导游小费+中文接送机 )"
                  class="title"
                >【五月美食节】上海出发塞班岛6天5晚自...</div>
                <span class="price">¥3180起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <span class="image">
                  <img
                    src="../assets/images/wKgBEFsscoCAVoO2AAOWOCBnxfs33.jpeg"
                    height="70"
                    width="100"
                  />
                </span>
                <div
                  title="ins网红拍照圣地·上海直飞美娜多5天自由行(网红无边泳池+布纳肯海龟合照+可考潜水证+深潜教学+追海豚+滑翔伞)"
                  class="title"
                >ins网红拍照圣地·上海直飞美娜多5天自...</div>
                <span class="price">¥3280起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <span class="image">
                  <img
                    src="../assets/images/wKgED1uQ-eOAMAiMAAU0ehvmPqA28.jpeg"
                    height="70"
                    width="100"
                  />
                </span>
                <div
                  title="金卡最高立减500+畅享一价全包·上海往返马尔代夫鲁滨逊努努岛7天5晚自由行（水屋带私人泳池+精彩晚会DJ表演+全天托儿服务+锦鲤免费升级房型/水飞上岛+可订库拉玛提岛/阿玛瑞/波杜希蒂岛/神仙珊瑚岛/奥臻岛/芙花芬岛/莫凡彼岛/尼亚玛/奥静岛）"
                  class="title"
                >金卡最高立减500+畅享一价全包·上海往...</div>
                <span class="price">¥10680起</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);" target="_blank">
                <span class="image">
                  <img
                    src="../assets/images/wKgED1xFn0SAXJ-1AAKOKgZepzM541.png"
                    height="70"
                    width="100"
                  />
                </span>
                <div
                  title="北京直飞普吉岛7天自由行（端午/暑期惊喜优惠+最高立减968元+家庭/蜜月同款+屋顶/星光泳池+网红酒店/轻奢别墅任意搭+可定制曼谷/清迈多地连线+赠电话卡/VIP接送机/旅游保险）"
                  class="title"
                >北京直飞普吉岛7天自由行（端午/暑期惊...</div>
                <span class="price">¥3250起</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/css/index.css";
import { BannerTravelUrl, TravelsQueryUrl } from "../request/api";

export default {
  components: {},
  data() {
    return {
      // 轮播图小图
      BannerList: [],
      // 轮播图大图
      swiperBigImg: [],
      // 轮播图当前字符
      currentNum: 0,
      // 热门游记数组
      travelList: [],
    };
  },

  created() {
    // 请求轮播图数据
    this.getBannerData();

    // 请求热门游记数据
    this.getTravelsData();

    // 每隔两秒切换轮播图
    let time = setInterval(() => {
      this.swiperBigImg = this.BannerList[this.currentNum];
      this.currentNum++;
      if (this.currentNum === 5) {
        this.currentNum = 0;
      }
    }, 1500);
  },
  methods: {
    // 轮播图点击小图切换大图
    BannerClick(item) {
      console.log("item:", item);
      this.swiperBigImg = item;
      this.currentNum = item.sequence;
    },

    // 封装轮播图请求
    async getBannerData() {
      let res = await BannerTravelUrl();
      // console.log(res.data.data);
      this.BannerList = res.data.data;
      this.swiperBigImg = res.data.data[0];
    },

    // 封装热门游记请求
    async getTravelsData() {
      let res = await TravelsQueryUrl();
      console.log("data:", res.data.data.content);
      this.travelList = res.data.data.content;
    },
  },
};
</script>

<style lang="less" scoped>
.active {
  border: 1px solid orange;
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
</style>